<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>Document</title>
		<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
		<script src="/assets/libs/echarts.min.js"></script>
		<!-- <script  src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> -->
		<script src="https://www.amaoee.cn/assets/js/vue.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
		<style>
			.content-wrap {
				background-color: #FFFFFF;
				border-radius: 4px;
				padding: 15px;
				overflow-x: auto;
			}

			.second-box {
				margin-top: 15px;
				margin-left: 10px;
			}

			.second-border {
				display: inline-block;
				border: 1px solid #EEEEEE;
				border-radius: 4px;
			}

			.second-box .second-item {
				padding: 8px 10px;
				display: inline-block;
				cursor: pointer;

			}

			.second-box .second-item.active {
				color: #18bc9c;
			}

			.third-box {
				margin-top: 15px;
				margin-left: 10px;
			}

			.third-border {
				display: inline-block;
				border: 1px solid #EEEEEE;
				border-radius: 4px;
			}

			.third-box .third-item {
				padding: 8px 10px;
				display: inline-block;
				cursor: pointer;

			}

			.third-box .third-item.active {
				color: #18bc9c;
			}

			.third-txt {
				float: right;
				cursor: pointer;
				border-radius: 4px;
				padding: 6px 10px;
				display: inline-block;
				margin-right: 48px;
				margin-top: 10px;
				/* margin-top: -20px; */
				border: 1px solid #18bc9c;
				background-color: #18bc9c;
				color: #FFFFFF;
			}

			a {
				color: #FFFFFF;
			}

			a:hover {
				color: #FFFFFF;
			}

			.first-box {}

			.first-item {
				cursor: pointer;
				border-radius: 4px;
				padding: 6px 10px;
				display: inline-block;
				margin: 10px 10px 0 10px;
				border: 1px solid #EEEEEE;
				background-color: #FFFFFF;
				color: #333;
			}

			.first-box .second-item {
				float: right;
				cursor: pointer;
				border-radius: 4px;
				padding: 6px 10px;
				display: inline-block;
				margin: 10px 0px 0 10px;
				border: 1px solid #18bc9c;
				background-color: #18bc9c;
				color: #FFFFFF;
			}

			.first-item.active {
				border: 1px solid #18bc9c;
				background-color: #18bc9c;
				color: #FFFFFF;
			}

			.item-top {
				display: flex;
			}

			.item-info {
				font-size: 18px;
				margin: 15px 0 0 30px;
			}

			.item-info:first-child {
				margin-left: 10px;
			}

			.item-bg {
				width: 95%;
				margin: 50px auto;
				overflow-x: auto;
			}

			table {
				width: 95%;
				margin: 50px auto;
				text-align: center;
			}

			th,
			td {
				text-align: center;
				height: 50px;

			}

			.item-check {
				width: 20px;
				height: 20px;
				border-radius: 5px;
				background-color: #BBBBBB;
				margin: 0 auto;
			}

			.item-title {
				position: fixed;
				width: 150px;
				height: 50px;
				background-color: rgba(0, 0, 0, 0.8);
				top: 50%;
				left: 50%;
				text-align: center;
				line-height: 50px;
				color: #FFFFFF;
				transform: translate(-50%, -50%);
			}

			.item-input {
				position: fixed;
				width: 200px;
				height: 100px;
				background-color: rgba(0, 0, 0, 0.6);
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #FFFFFF;
			}

			.block {
				width: 100%;
				display: flex;
				flex-direction: row-reverse;

			}

			.boxPie {
				width: 600px;
				height: 600px;

			}

			.item-img {
				/* background-color: #000088; */
			}

			.item-pie,
			.item-zu {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				margin-top: 100px;

				/* border-radius: 20rpx; */
				float: left;
				justify-content: space-around;
			}

			.item-active {
				margin-left: 50px;
				background-color: #18bc9c;
				;
				width: 100px;
				display: inline-block;
				cursor: pointer;
				color: #FFFFFF;
				height: 36px;
				line-height: 30px;
				/* border: 1px solid #EEEEEE; */
				border-radius: 4px;
				padding: 5px;
				text-align: center;

			}
		</style>

	</head>
	<body>
		<div class="content-wrap" id="app">
			<div class="item-box">
				<div class="item-top">
					<div class="item-info">
						客户编号：{$user_info.id}
					</div>
					<div class="item-info">
						用户名：{$user_info.nickname}
					</div>
					<div class="item-info">
						{$user_info.mobile}
					</div>
					<div class="item-info">
						性别：{$user_info.gender}
					</div>
					<!--					<div class="item-info">-->
					<!--						年龄：18-->
					<!--					</div>-->
				</div>
			</div>

			<div class="third-box">
				<div class="third-border">
					<span class="third-item" :class="{active:index==current}" v-for="(item,index) in day" :key="index"
						@click="change(index)">{{item}}</span>
				</div>
				<div class="item-active" @click="dialogFormVisible = true">
					修改每周建议
				</div>
				<div class="item-active" @click="dialogVisible = true">
					修改建议数据
				</div>
			</div>
			<div class="">
				<el-dialog title="修改每周建议" :visible.sync="dialogFormVisible">
					<el-form :model="form">
						<el-form-item label="建议标题" :label-width="formLabelWidth">
							<el-input v-model="form.title" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="每周统计图类型" :label-width="formLabelWidth">
							<el-select v-model="form.type_id" placeholder="请选择统计图类型">
								<el-option v-for="item in dayOption" :key="item.value" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="closeDay()">取 消</el-button>
						<el-button type="primary" @click="onSubmit()">确 定</el-button>
					</div>
			</div>
			<div class="">
				<el-dialog title="修改每周建议数值" :visible.sync="dialogVisible">
					<el-form :model="form">
						<el-form-item label="建议数值" :label-width="formLabelWidth">
							<el-input v-model="formData.num" autocomplete="off"  type="number" min="0"
								@input="changeInput()"></el-input>
						</el-form-item>
						<el-form-item label="标准数值类型" :label-width="formLabelWidth">
							<el-select v-model="formData.type_id" placeholder="请选择数值类型">
								<el-option v-for="item in dayNumber" :key="item.value" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="closeDayNumber()">取 消</el-button>
						<el-button type="primary" @click="onNumberSubmit()">确 定</el-button>
					</div>
			</div>
			<div class="block">
				<!-- <input type="date" name="" id="" value="" /> -->
				<el-date-picker v-model="value1" type="date" placeholder="选择日期" @change="changeTime()">
				</el-date-picker>
			</div>
			<div id="" class="item-img">
				<div class="item-pie" id="item-pie">
					<span style="font-size:14px;">
					</span>

				</div>

				<!-- <div id="zu" style="width: 45%;height: 400px;"></div> -->


			</div>


		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					dayOption: [],
					dayNumber: [],
					dialogFormVisible: false,
					dialogVisible: false,
					form: {
						user_id: "{$user_info['id']}",
						type_id: '',
						type: 1,
						title: ''
					},
					formLabelWidth: '120px',
					formData: {
						user_id: "{$user_info['id']}",
						type_id: '',
						num: ''
					},
					day: '',
					current: '',
					pickerOptions: {
						disabledDate(time) {
							return time.getTime() > Date.now();
							console.log(time.getTime() > Date.now())
						},
						shortcuts: [{
							text: '今天',
							onClick(picker) {
								picker.$emit('pick', new Date());
								console.log(picker)
							}
						}, {
							text: '昨天',
							onClick(picker) {
								console.log(picker)
								const date = new Date();
								date.setTime(date.getTime() - 3600 * 1000 * 24);
								picker.$emit('pick', date);
							}
						}, {
							text: '一周前',
							onClick(picker) {
								const date = new Date();
								date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit('pick', date);
							}
						}]
					},
					value1: '',
					value2: '',
					dateImg: '',
					timeNow: '',
					user_id: "{$user_info['id']}",
					weekTypeListURL: '{$url}/index.php/api/record_data/typeList',
					weekDateURL: '{$url}/index.php/api/record_admin_data/weekRecord',
					dayOptionUrl: '{$url}/index.php/api/record_admin_data/editAdvise',
					typeDataList: '{$url}/index.php/api/record_admin_data/typeDataList',
					dataInfo: '{$url}/index.php/api/record_admin_data/editUserDataInfo',
				},
				created() {
					this.getdetail()
					this.init()

					var myDate = new Date();
					var month = myDate.getMonth() + 1;
					var months = month < 10 ? '0' + month : month;
					var date = myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate()
					this.dateImg = myDate.getFullYear() + '-' + months + '-' + date;
					console.log(this.dateImg)
					this.getde()
				},

				methods: {
					changeInput() {
						if (this.formData.num < 0) {
							this.$message({
								message: '建议数值不能小于0',
								type: 'warning'
							});
							this.formData.num=0
							return;
						}
					},
					closeDayNumber() {
						this.formData = {
							user_id: "{$user_info['id']}",
							type_id: '',
							num: ''


						}
						this.dialogVisible = false
					},
					onNumberSubmit() {
						console.log(this.form);
						if (this.formData.num == '') {
							this.$message({
								message: '请输入建议数值',
								type: 'warning'
							});
							return;
						}
						if (this.formData.type_id == '') {
							this.$message({
								message: '请选择建议数值类型',
								type: 'warning'
							});
							return;
						}
						$.ajax({
							type: 'POST',
							url: this.dataInfo,
							data: this.formData,
							dataType: 'json',
							success: (res) => {
								console.log(res)
								this.form = {
									user_id: "{$user_info['id']}",
									type_id: '',
									num: ''
								}
								this.dialogVisible = false
								this.getde()
							}
						})
					},

					closeDay() {
						this.form = {
							user_id: "{$user_info['id']}",
							type_id: '',
							type: 1,
							title: ''
						}
						this.dialogFormVisible = false
					},
					onSubmit() {
						console.log(this.form);
						if (this.form.title == '') {
							this.$message({
								message: '请输入建议',
								type: 'warning'
							});
							return;
						}
						if (this.form.type_id == '') {
							this.$message({
								message: '请选择统计图类型',
								type: 'warning'
							});
							return;
						}
						$.ajax({
							type: 'POST',
							url: this.dayOptionUrl,
							data: this.form,
							dataType: 'json',
							success: (res) => {
								console.log(res)
								this.form = {
									user_id: "{$user_info['id']}",
									type_id: '',
									type: 1,
									title: ''
								}
								this.dialogFormVisible = false
								this.getde()
							}
						})
					},
					init() {
						$.ajax({
							type: 'POST',
							url: this.typeDataList,
							data: {
								type: 1
							},
							dataType: 'json',
							success: (res) => {
								console.log(res)
								res.data.forEach((item, index) => {
									var data = {}
									data.value = item.id
									data.label = item.name
									this.dayNumber.push(data)
								})
							}
						})
					},

					changeTime() {
						if (this.value1 != '') {
							var y = this.value1.getFullYear();
							var m = this.value1.getMonth() + 1;
							m = m < 10 ? '0' + m : m;
							var d = this.value1.getDate();
							d = d < 10 ? ('0' + d) : d;
							// return y + '-' + m + '-' + d;
							console.log(y + '-' + m + '-' + d)
							this.dateImg = y + '-' + m + '-' + d
							this.getde()
						}

					},
					getnone() {
						this.item_input = false
					},
					goCompare() {
						"{{:url('user/user/compare')}}"
					},
					change(id) {
						this.current = id
						this.getde()
					},
					getdetail() {
						$.ajax({
							type: 'POST',
							url: this.weekTypeListURL,
							data: {},
							dataType: 'json',
							success: (res) => {
								console.log(res)
								this.day = res.data.week
								for (let item in this.day) {
									var data = {}
									if (this.day[item] != '全部') {
										data.value = item
										data.label = this.day[item]
										this.dayOption.push(data)
									}
								}

							}
						})
					},
					getde() {
						$("#item-pie").empty();
						console.log(this.dateImg)
						$.ajax({
							type: 'POST',
							url: this.weekDateURL,
							data: {
								user_id: this.user_id,
								day: this.dateImg,
								type: this.current
							},
							dataType: 'json',
							success: (res) => {
								console.log(res.data)
								var top10Height = 400
								for (var i = 0; i < res.data.length; i++) {
									//初始化4个节点
									$('#item-pie').append(
										'<div id="cluster_' + i + '" style="width:51rem;height:' +
										top10Height +
										'px;display:inline;float:left;margin-left:10px;"></div>');
									myClusterChart = echarts.init($('#cluster_' + i).get(0));
									myClusterChart.setOption(res.data[i]);
								}

							}
						})
					}
				}
			})
		</script>

	</body>
</html>
